<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="http://cdn.bootcss.com/three.js/r70/three.min.js"></script>
</head>
<body>
<canvas width="1280" height="720" id="canvas"></canvas>
<div style="position:fixed;top:0;right:0">
    <input type="button" id="shut_all" value="shut off all" onclick="off ()"/><br/>
    <input type="button" id="light_all" value="light on all" onclick="onAll ()"/><br/>
    <input type="button" id="btn_anim" value="animation" onclick="a ()"/>
</div>
<script type="text/javascript" charset="utf-8">
//window.onload = function () {
    var canvas = document.getElementById ('canvas'),
            holder = {hold:false}, center = new THREE.Vector3(20, 30, 40), rotation = {x:0,y:0,z:0};
    canvas.onmousedown = function (e) {
        holder.x = e.clientX;
        holder.y = e.clientY;
        holder.hold = true;
    };
    var C = [new THREE.Color (0), new THREE.Color (0x6666ff)];

    canvas.onmousemove = function (e) {
        if (holder.hold) {
            var p = {x: e.clientX, y: e.clientY};
            var d = {x: p.x - holder.x, y: p.y - holder.y};
            var xd = d.x < 0 ? -1 : 1, yd = d.y < 0 ? -1 : 1;
            var h = 500;
/*
            camera.rotation.x += xd * Math.atan2 (d.y, h);
            camera.rotation.y += yd * Math.atan2 (d.x, h);
*/
            center.rotation.x += xd * .005;
            center.rotation.y += yd * .005;
            camera.lookAt (center);
/*
            var h = 1000;
            var alpha = Math.atan2 (d.y, 1000);
//            rotateX (center, alpha);
            rotateX (camera.rotation, alpha);
//            rotateZ (center, alpha);

            alpha = Math.atan2 (d.x, 1000);
            rotateY (camera.rotation, alpha);

            holder.x = p.x;
            holder.y = p.y;
//            camera.lookAt (center);
*/
            renderer.render(scene, camera);
            console.log (center);
        }
    };
    function rotateX (v, alpha) {
        var y = v.y, z = v.z;
        v.y = y * Math.cos (alpha) - z * Math.sin (alpha);
        v.z = y * Math.sin (alpha) + z * Math.cos (alpha);
    }

    function rotateY (v, alpha) {
        var x = v.x, z = v.z;
        v.x = z * Math.cos (alpha) + x * Math.cos (alpha);
        v.z = z * Math.sin (alpha) - x * Math.sin (alpha);
    }

    function rotateZ (v, alpha) {
        var x = v.x, y = v.y;
        v.x = x * Math.cos (alpha) - y * Math.sin (alpha);
        v.y = x * Math.sin (alpha) + y * Math.cos (alpha);
    }
    canvas.onmouseup = function (e) {
        holder.hold = false;
    };
    var renderer = new THREE.WebGLRenderer ({
        canvas:canvas
    });
    renderer.setClearColor (0);
    var scene = new THREE.Scene ();
    var camera = new THREE.PerspectiveCamera (45, 16/9, 1, 1000);
    camera.position.x = 80;
    camera.position.y = 80;
    camera.position.z = 100;
    camera.lookAt (center);
//    camera.lookAt ({x:0,y:0,z:0});
    scene.add (camera);
    var cubes = [], colors = [0, 0x6666ff];
    for (var i = 0; i < 8; i ++) {
        cubes [i] = [];
        for (var j = 0; j < 8; j ++) {
            cubes [i][j] = [];
            for (var k = 0; k < 8; k ++) {
                var index = Math.random () < .75 ? 0 : 1;
                var cube = new THREE.Mesh (new THREE.BoxGeometry (1, 1, 1), new THREE.MeshBasicMaterial ({
                    /*wireframe:true,*/ color:C[1]
                }));
                cube.position.x = i * 8;
                cube.position.y = j * 8;
                cube.position.z = k * 8;
                cubes[i][j].push (cube);
                scene.add (cube);
            }
        }
    }

    var light = new THREE.AmbientLight (0xffffff);
/*
    light.position.x = 0;
    light.position.y = 0;
    light.position.z = 5;
*/

    scene.add (light);
    renderer.render (scene, camera);

    function changeColor (color) {
        var x, y, z, cube;
        for (x = 0; x < 8; x ++) {
            for (y = 0; y < 8; y ++) {
                for (z = 0; z < 8; z ++) {
                    cubes[x][y][z].material.color = color;
                }
            }
        }

        renderer.render (scene, camera);
    }

var last, h = {x:0,y:0,z:0}, timer;
    function a () {
        /*
        if (last) {
            last.material.color = C[0];
        }
        */
        last = cubes[h.x][h.y][h.z];
        last.material.color = C[1];
        h.z ++;
        if (h.z >= 8) {
            h.z = 0;
            h.y ++;
            if (h.y >= 8) {
                h.y = 0;
                h.x ++;
                if (h.x >= 8) {
                    h.x = 0;
                }
            }
        }
        renderer.render (scene, camera);
        timer = setTimeout (a, 100);
    }


    function off () {changeColor (C[0]);}
    function onAll () { changeColor (C[1])}
</script>
</body>
</html>